<template>
	<gui-page class="container" :customHeader="true">
		<template v-slot:gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 返回按钮 -->
				<gui-header-leading :backButtonClass="['gui-color-white']" :home="false"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text
					class="gui-h6 gui-flex1 gui-ellipsis gui-text-center gui-header-content gui-color-white">会议室预约</text>
				<view style="width:60rpx;"></view>
			</view>
		</template>
		<!-- 请开始您的开发 ~ -->
		<template v-slot:gBody>
			<view class="gui-padding">
				<view class="daily_time">
					<scroll-view class="gui-scroll-x" :scroll-x="true" :scroll-with-animation="true"
						:scroll-into-view="'scrollItem'+currentIndex">
						<view class="gui-scroll-x-items" v-for="(item, index) in daysList" :key="index" :class="[
										currentIndex == index ? 
										['selectDay', 'gui-color-white'] : 
										['gui-bg-white', 'gui-white-bg-level-2']]" @tap="changeDay(index)" :id="'scrollItem'+index">
							<text class="gui-scroll-items-date" :class="[currentIndex == index ? 
										'gui-scroll-day-active' : '']">{{item.day}}</text>
							<text class="gui-scroll-items-week" :class="[currentIndex == index ? 
										'gui-scroll-day-active' : '']">{{item.week}}</text>
						</view>
					</scroll-view>
				</view>
				<view class="meet_room" v-for="item in list">
					<view>
						<view style="float: left;font-weight: bold;font-size: 14px;">{{item.name}}</view>
						<view
							style="border-radius: 0.2rem;;float: left;margin-left: 200px;width: 50px;background-color: #008aff!important;height: 30px;color: white;text-align: center;">
							<view style="margin-top: 4px;" @click="open1(item)">预约</view>
						</view>
					</view>

					<scroll-view class="gui-scroll-x" :show-scrollbar="false" :scroll-x="true"
						style="width:630rpx;margin-top: 50px;overflow: hidden;" :scroll-left="50">
						<view class="gui-scroll-x-items" v-for="it in item.timeList">
							<view class="time_box" :class="{'time_box_select':it.selected}"
								@click="selectTime(item.timeList,it)">
								{{it.time}}
							</view>

						</view>



					</scroll-view>
				</view>

			</view>

			<!--弹出窗-->
			<gui-modal :customClass="['gui-bg-white', 'gui-white-bg-level-3', 'gui-border-radius']" ref="guimodal1"
				title="会议主题" titleStyle="color:gray ;line-height:100rpx; font-size:28rpx;
font-weight:700;" >
				<template v-slot:content>
					<view class="gui-padding gui-bg-white gui-white-bg-level-2">
						<input type="text" class="gui-form-input" v-model="zhuti" name="name1" placeholder="请输入会议主题" />
					</view>
				</template>

				<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
				<template v-slot:btns>
					<view class="gui-flex gui-row gui-space-between">
						<view hover-class="gui-tap" class="modal-btns gui-flex1" style="margin-right:80rpx;">
							<text class="modal-btns gui-color-gray" @tap="close1">取消</text>
						</view>
						<view hover-class="gui-tap" class="modal-btns gui-flex1" style="margin-left:80rpx;">
							<text class="modal-btns gui-primary-blue" @tap="confirm1">确认</text>
						</view>
					</view>
				</template>
			</gui-modal>
		</template>




	</gui-page>
</template>

<script>
	// 模拟日期
	import graceJS from "@/Grace6/js/grace.js";
	import BASE_URL from '@/config/api.js'
	// 起始日期, 格式 2019-08-01，例如今天
	var startDay = graceJS.now('number');
	var daysList = [];
	// 区间天数 以14天为例
	var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
	for (let i = 0; i < 14; i++) {
		var timeStamp = startDay + (i * 3600 * 24000);
		var daysArr = graceJS.toDate(timeStamp, 'array');
		var obj = {};
		obj.day = daysArr[1] + '-' + daysArr[2];
		obj.dayFull = daysArr[0] + '-' + daysArr[1] + '-' + daysArr[2];
		var date = new Date();
		date.setTime(timeStamp);
		obj.week = weekday[date.getDay()];
		daysList.push(obj)
	}
	export default {
		data() {
			return {
				daysList: daysList,
				currentIndex: 0,
				list: [],
				currentData: null,
				zhuti: ""
			}
		},
		onLoad: function() {

			this.getList()

		},
		methods: {
			book(data) { //预约
				console.log(data)
				var selectedDay = this.daysList[this.currentIndex]; //当前的日期
				var startTime = "";
				var endTime = "";
				//开始时间索引
				for (var i = 0; i < data.timeList.length; i++) {
					if (true == data.timeList[i].selected) {
						startTime = data.timeList[i].time
						break;
					}


				}
				//结束时间索引
				for (var j = data.timeList.length - 1; j >= 0; j--) {
					if (true == data.timeList[j].selected) {
						endTime = data.timeList[j].time
						break;
					}


				}
				let paraData = {};
				paraData.roomId = data.id
				paraData.date = selectedDay.dayFull
				paraData.startTime = startTime
				paraData.endTime = endTime
				paraData.remarks = this.zhuti
				if(startTime.length==0||endTime.length==0){
					uni.showToast({
						title:'会议时间必填',
						icon: "none"
					});
					return false;
				}
				if(this.zhuti.length==0){
					uni.showToast({
						title:'会议主题必填',
						icon: "none"
					});
					return false;
				}
				var token = graceJS.getStorage('token');

				graceJS.post(
					BASE_URL + '/display/reservation/reservation/save',
					paraData,
					'form', {
						Token: token
					},
					(res) => {
						if (res.success == true) {
							uni.showToast({
								title: res.msg,
								icon: "none"
							});

						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							});
						}
					},
					(e) => {
						console.log(e);
					}
				);
			},
			selectTime(timeList, e) { //选择时间段
				console.log(timeList)
				console.log(e)
				if (true == e.selected) {
					e.selected = false
				} else {
					e.selected = true
				}
				let startIndex = 0;
				let endindex = 0;
				//开始时间索引
				for (var i = 0; i < timeList.length; i++) {
					if (true == timeList[i].selected) {
						startIndex = i;
						break;
					}


				}
				//结束时间索引
				for (var j = timeList.length - 1; j >= 0; j--) {
					if (true == timeList[j].selected) {
						endindex = j;
						break;
					}


				}
				for (var x = 0; x < timeList.length; x++) {
					if (x >= startIndex && x <= endindex) {
						timeList[x].selected = true
					}


				}


			},
			getList() {
				var selectedDay = this.daysList[0];
				var token = graceJS.getStorage('token');
				var userId = graceJS.getStorage('userId');
				console.log(selectedDay)

				var currentDay = graceJS.now('str', 3000)
				graceJS.get(
					BASE_URL + '/display/room/doorplateRoom/meetingList', {
						createDate: currentDay
					}, {
						Token: token
					},
					(res) => {


						this.list = res.meetingList

					},
					(e) => {
						console.log(e);
					}
				);

			},
			changeDay: function(index) {
				var selectedDay = this.daysList[index];
				console.log(selectedDay);
				this.currentIndex = index;
			},
			open1: function(data) {
				this.currentData = data;
				this.$refs.guimodal1.open();
			},
			close1: function() {
				this.$refs.guimodal1.close();
			},
			confirm1: function() {
				this.book(this.currentData)
				// 客户点击确认按钮后的逻辑请在此处实现
				this.$refs.guimodal1.close();
			},
		}
	}
</script>

<style scoped>
	.selectDay {
		background-color: rgb(54, 101, 253);
	}

	.container {
		background-image: url(../../static/img/bj.png);
		background-size: cover;
		background-repeat: no-repeat;
	}

	.text {
		text-align: center;
		font-size: 20px;
		font-weight: 500;
		color: rgb(12, 37, 78);
		margin-top: 100rpx;
	}

	.daily_time {
		background-color: white;
		height: 100rpx;
		margin-top: 40rpx;
		border-radius: 0.5rem;
		overflow: hidden;
	}

	.meet_room {
		background-color: white;
		height: 230rpx;
		margin-top: 40rpx;
		border-radius: 0.5rem;
		overflow: hidden;
		padding: 20px;
	}

	.time_box {
		border-radius: 0.5rem;
		border-style: solid;
		border-color: rgb(230, 232, 237);
		color: rgb(101, 117, 143);
		width: 60px;
		height: 60px;
		line-height: 60px;
		text-align: center;
	}

	.time_box_select {
		background-color: #008aff !important;
		color: white !important;
		border-style: none;
	}

	.time_box_cannot_select {
		background-color: rgb(230, 232, 237) !important;
		color: white !important;
		border-style: none;
	}

	/*下面是日历样式*/

	.gui-scroll-x-items {
		width: 150rpx;
		margin: 0;
		padding: 12rpx 0;
		flex-direction: column;
	}

	.gui-scroll-items-date {
		font-size: 28rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.gui-scroll-items-week {
		font-size: 22rpx;
		line-height: 36rpx;
		margin-bottom: 10rpx;
		text-align: center;
	}

	.gui-list-items {
		position: relative;
	}

	.price {
		color: #FF9B00;
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.button {
		position: absolute;
		right: 8px;
		bottom: 15px;
		width: 100rpx;
		height: 50rpx;
		border-radius: 50rpx;
	}

	.button-text {
		font-size: 24rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 50rpx;
	}

	.modal-btns {
		line-height: 88rpx;
		font-size: 26rpx;
		text-align: center;
		width: 200rpx;
	}
</style>